<!-- 首页 -->
<template>

  <div>
    <!-- 公共顶 -->
    <div class="public_div">
      <div style="margin: auto; display: flex;">
        <img src="../../assets/img/logo.png" class="logo" alt="logo">
        <div style="margin-left: 80px;">
          <el-menu :default-active=this.index class="el-menu-demo" @select="menu" mode="horizontal"
                   active-text-color="#ffffff" background-color="#56a1d4" text-color="#000" >
            <el-menu-item v-for="(itme,i) in titles" :key="i" :index="itme.index" style="font-size:20px ;">
            {{itme.name}}
            </el-menu-item>
          </el-menu>
        </div>
        <div style="padding: 20px; margin-right: 5vw;">
          <el-input v-model="input" suffix-icon="el-icon-search" @keyup.enter.native="SearchFor()" placeholder="输入你想找的课程名称"
                    style="width: 13vw; height: 3.5vh;"></el-input>
        </div>
        <div v-if="loginstart=='0'" style="display: flex;margin: auto ">
          <img src="../../assets/img/ren.png" alt="" style="width: 25px; margin-right: 0.1vw;">
          <el-link @click="login()" target="_blank">登录</el-link>
        </div>
        <div v-if="loginstart=='1'">
          <el-dropdown style="margin-top: 2vh;">
            <div style="display: flex;" class="el-dropdown-link">
              <el-avatar :size="50" :src="sculpture"></el-avatar>
              <small class="stu_name">{{ username }}</small>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="person()"><i class="el-icon-user"></i>个人中心</el-dropdown-item>
              <el-dropdown-item @click.native="open()"><i class="el-icon-back" ></i> 退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <router-view></router-view>
  </div>

</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      username: '',
      sculpture: '',
      loginstart:'0',
      index: '0',
      input: '',
      titles: [
        {index: '0', name: "首页", url: "/index/home"},
        {index: '1', name: "课程", url: "/index/Course"},
        {index: '2', name: "名师", url: "/index/tacher"},
        {index: '3', name: "文章", url: "/index/article"},
      ]
    }
  },
  mounted() {
    // 登录状态判断
    var user_info=JSON.parse(sessionStorage.getItem("user_info"))
    var Loginstart=JSON.parse(sessionStorage.getItem("Loginstate"))
    if(Loginstart=='1'){
      this.loginstart=Loginstart  
      this.username=user_info.username
      this.sculpture=user_info.sculpture
    }else{
      this.loginstart='0'
    }
    
// 页签切换判断
    var test = window.location.hash;
    for (var i in this.titles) {
      if (test.split('#')[1] == this.titles[i].url) {
        this.index = this.titles[i].index
      }
    }
  },
  methods: {
    // 页签切换
    menu(index) {
    var test = window.location.hash;
      if(test.split('#')[1]!=this.titles[index].url){
        this.$router.replace(this.titles[index].url)
      }
     
    },
    // 进入登录页
    login() {
      this.$router.replace("/login")
    },
    // 进入个人主页
    person() {
      this.$router.replace("/secondsheets/ThatPerson")
    },
    //搜索
    SearchFor(){
      if(this.input!=''){
        this.$store.state.CourseName=this.input
        this.$router.replace("/secondsheets/searchresul")
      }else{
        this.$message({
            message: '请输入你想找的课程',
            type: 'warning'
          });
      }
    },
    // 退出登录
    open() {
        this.$confirm('您是否要退出登录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          sessionStorage.removeItem('user_info')
          sessionStorage.setItem('Loginstate',JSON.stringify(0))
          this.$router.replace("/login")
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出登录'
          });          
        });
      }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

.public_div {
  height: 78px;
  /* padding: 20px; */
  background-color: #56a1d4;
  display: flex;
  box-shadow: 0 2px 0px #e7e7e7;
}
.logo{
  padding-top: 2vh;
  width: 100px;
  height: 60px;
}

el-link {
  font-size: 18px;
}

.stu_name {
  font-size: 18px;
  padding-top: 15%;
  margin-left: 10px;
}
</style>